// 详情
<template>
    <div class="main m-detail">
        <img :src="img" alt="">
        <div class="detail-info">
            <div class="u-title">影片简介</div>
            <p>导　　演：{{detailInfo.director}}</p>
            <p>主　　演：{{detailInfo.actors}}</p>
            <p>地区语言：{{detailInfo.nation}} ({{detailInfo.language}})</p>
            <p>类　　型：{{detailInfo.category}}</p>
            <p>上映日期：{{detailInfo.premiereAt}}</p>
            <p class="desc">{{detailInfo.synopsis}}</p>
        </div>
        <a href="javascript:;">立即购票</a>
    </div>
</template>

<script>
    import $ from 'jquery';
    export default {
        data: function() {
            return {
                detailInfo: {},
                img: '' 
            }
        },
        mounted: function() {
            // 请求详情的数据
            var url = 'http://localhost:3000/' + this.$route.params.id  + '?time=' + new Date().getTime();
            var that = this;
            $.get(url, function(res) {
                that.detailInfo = res.data.film;
                that.img = res.data.film.cover.origin;

                // 在这里改变  store 里面的 title ,
                that.$store.commit('changeTitle', res.data.film.name);
            })
        }
    }
</script>

<style>
    .m-detail img { width: 100%; }

    .m-detail { color: #333; }
    .detail-info .u-title { margin: 16px auto; border-left: 16px solid rgb(228, 200, 156); font-size: 16px; padding-left: 4px;}

    .detail-info p { height: 18px; overflow: hidden; margin-bottom: 10px; padding-left: 20px; font-size: 12px;}
    .detail-info p.desc { height: auto; line-height: 1.5; margin-bottom: 80px; padding-right: 20px;}

    .m-detail a { display: inline-block; font-size: 14px; min-width: 156px; height: 36px; line-height: 36px; background-color: #fe8233; border-radius: 18px; color: #fff; text-align: center; position: fixed; bottom: 20px; left: 50%; margin-left: -78px; text-decoration: none; }
</style>